<template>
	<section>
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" :model="filters" ref="filters" :rules="rules">
				<el-form-item>
					<el-button type="primary" @click="pointsSetting">系统积分设置</el-button>
				</el-form-item>
				<el-form-item prop="date">
					<el-date-picker
						v-model="filters.date"
						range-separator="至"
						type="datetimerange"
						placeholder="选择时间范围">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="交易类型" prop="trade">
					<el-select v-model="filters.trade" clearable>
						<el-option label="交易人ID" value="1"></el-option>
						<el-option label="交易人昵称" value="2"></el-option>
						<el-option label="交易单号" value="3"></el-option>
						<el-option label="交易对象昵称" value="4"></el-option>
						<el-option label="交易对象ID" value="5"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="" prop="input" v-if="!filters.trade == ''">
					<el-input v-if="filters.trade == '1'" v-model="filters.input" placeholder="交易人ID"></el-input>
					<el-input v-if="filters.trade == '2'" v-model="filters.input" placeholder="交易人昵称"></el-input>
					<el-input v-if="filters.trade == '3'" v-model="filters.input" placeholder="交易单号"></el-input>
					<el-input v-if="filters.trade == '4'" v-model="filters.input" placeholder="交易对象昵称"></el-input>
					<el-input v-if="filters.trade == '5'" v-model="filters.input" placeholder="交易对象ID"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary"  @click="systemGive" v-if="false">系统赠送</el-button>
					<el-button type="primary" @click="systemBuckle" v-if="false">系统代扣</el-button>
					<el-button type="primary" @click="getPointsList">查找</el-button>
				</el-form-item>
			</el-form>
		</el-col>
		
		<!--列表-->
		<el-table :data="pointsList" highlight-current-row v-loading="listLoading" style="width: 100%;">
			<el-table-column prop="id" label="序号" align="center">
			</el-table-column>
			<el-table-column prop="tradeNo" label="交易单号" align="center">
			</el-table-column>
			<el-table-column prop="tradeUserId" label="交易人ID" align="center">
			</el-table-column>
			<el-table-column prop="tradeNickname" label="交易人昵称" align="center">
			</el-table-column>
			<el-table-column prop="tradeTypeStr" label="交易类型" align="center">
				<!-- <template slot-scope="scope">
					<span v-if="scope.row.tradeType == 3">购买积分商品</span>
					<span v-if="scope.row.tradeType == 5">积分赠送</span>
					<span v-if="scope.row.tradeType == 6">注册赠送</span>
					<span v-if="scope.row.tradeType == 7">每日签到</span>
					<span v-if="scope.row.tradeType == 8">系统赠送</span>
					<span v-if="scope.row.tradeType == 9">系统扣除</span>
					<span v-if="scope.row.tradeType == 10">邀请好友</span>
				</template> -->
			</el-table-column>
			<el-table-column prop="tradePrice" label="交易价格" align="center">
			</el-table-column>
			<el-table-column prop="tradeObjUserId" label="交易对象ID" align="center">
			</el-table-column>
			<el-table-column prop="tradeObjNickname" label="交易对象昵称" align="center">
			</el-table-column>
			<el-table-column prop="tradeTime" label="时间" align="center">
			</el-table-column>
		</el-table>
		<!--工具条-->
		<div class="toolbar" style="display: flex;justify-content: flex-end;">
			<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="currentPage"
				:page-sizes="[10, 20, 30, 40]"
				:page-size="size"
				layout="total, sizes, prev, pager, next, jumper"
				:total="total">
			</el-pagination>
		</div>
		<!--系统积分设置弹出框-->
		<el-dialog title="系统积分设置" :visible.sync="dialogPointsSetting" size="tiny">
			<el-form label-position="left" :model="pointsSettingForm" ref="pointsSettingForm" :rules="rule">
				<el-form-item label="注册赠送积分" label-width="160px" prop="register">
					<el-input v-model="pointsSettingForm.register" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="每日签到赠送积分" label-width="160px" prop="signIn">
					<el-input v-model="pointsSettingForm.signIn" auto-complete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogPointsSetting = false">取 消</el-button>
				<el-button type="primary" @click="submitPointsSetting('pointsSettingForm')">确 定</el-button>
			</div>
		</el-dialog>
		<!--系统赠送弹出框-->
		<el-dialog title="系统赠送" :visible.sync="dialogSystemGive" size="tiny">
			<el-form label-position="left" :model="systemGiveForm" ref="systemGiveForm" :rules="rule">
				<el-form-item label="用户ID/手机号" label-width="140px" prop="ID">
					<el-input v-model="systemGiveForm.ID" placeholder="请输入用户ID" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="赠送积分" label-width="140px" prop="money">
					<el-input v-model="systemGiveForm.money" placeholder="输入整数金额，0~999999" auto-complete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogSystemGive = false">取 消</el-button>
				<el-button type="primary" @click="submitSystemGive('systemGiveForm')">确 定</el-button>
			</div>
		</el-dialog>
		<!--系统代扣弹出框-->
		<el-dialog title="系统代扣" :visible.sync="dialogystemBuckle" size="tiny">
			<el-form :model="systemBuckleForm" label-position="left"  ref="systemBuckleForm" :rules="rule">
				<el-form-item label="用户ID/手机号" label-width="140px" prop="ID">
					<el-input v-model="systemBuckleForm.ID" placeholder="请输入用户ID" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="扣除积分" label-width="140px" prop="money">
					<el-input v-model="systemBuckleForm.money" placeholder="输入整数金额，0~999999" auto-complete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogystemBuckle = false">取 消</el-button>
				<el-button type="primary" @click="submitSystemBuckle('systemBuckleForm')">确 定</el-button>
			</div>
		</el-dialog>
	</section>
</template>

<script>
	
	import { getPointsList, givePoints, reducePoints, getIntegralList, getIntegralhandle } from '@/api/api';
	
	export default {
		data() {
			let validateInput = (rule, value, callback) => {
				if (!value) {
					callback(new Error('不能为空'));
				} else {
					callback();
				}
			};
			return {
				filters: {
					date: '',
					trade: '',
					input: ''
				},
				start: '',
				end: '',
				rules: {
					input: [
						{validator: validateInput, trigger: 'blur' }
					]
				},
				pointsList: [],
				total: 0,
				size: 10,
				currentPage: 1,
				listLoading: false,
				
				// 系统设置弹出框
				dialogPointsSetting: false,
				pointsSettingForm: {
					register: '',
					signIn: ''
				},
				// 系统赠送弹出框
				dialogSystemGive: false,
				systemGiveForm: {
					ID: '',
					money: ''
				},
				// 系统代扣弹出框
				dialogystemBuckle: false,
				systemBuckleForm: {
					ID: '',
					money: ''
				},
				rule: {
					ID: [
						{required: true, message: '不能为空', trigger: 'blur'}
					],
					money: [
						{required: true, message: '不能为空', trigger: 'blur'}
					],
					/*register: [
						{required: true, message: '不能为空', trigger: 'blur'}
					],
					signIn: [
						{required: true, message: '不能为空', trigger: 'blur'}
					],*/
				}
			}
		},
		methods: {
			getTime() {
				let starttime,endtime = ''
				let time = this.filters.date;
				if(!time[0] == '') {
					starttime = this.moment(time[0]).format('YYYY-MM-DD HH:mm:ss');
				}
				if(!time[1] == '') {
					endtime = this.moment(time[1]).format('YYYY-MM-DD HH:mm:ss');
				}
				if(starttime == "Invalid date"){
					starttime="";
				};
				if(endtime == "Invalid date"){
					endtime="";
				};
				this.start = starttime
				this.end = endtime
			},
			//获取积分明细列表
			getPointsList() {
				this.getTime();
				let para = {
					pageIndex: this.currentPage,
					pageSize: this.size,
				}
				if(!this.start == '') {
					para.startTime = this.start
				}
				if(!this.end == '') {
					para.endTime = this.end
				}
				if(!this.filters.trade == '') {
					para.type = this.filters.trade
					if(this.filters.trade == 1) {
						para.userId = this.filters.input.replace(/\s/g, "")
					}
					if(this.filters.trade == 2) {
						para.nickName = this.filters.input.replace(/\s/g, "")
					}
					if(this.filters.trade == 3) {
						para.orderNo = this.filters.input.replace(/\s/g, "")
					}
					if(this.filters.trade == 4) {
						para.objId = this.filters.input.replace(/\s/g, "")
					}
					if(this.filters.trade == 5) {
						para.objNickName = this.filters.input.replace(/\s/g, "")
					}
				}
				
				console.log(para)
				getPointsList(para).then((res) => {
					this.pointsList = res.data.data
					this.total = res.data.totalCount
					console.log(res)
				})
			},
			
			pointsSetting() {
				// 点击系统设置
				this.dialogPointsSetting = true
				getIntegralList({}).then(res => {
					this.pointsSettingForm.register = res.data[0].register
					this.pointsSettingForm.signIn = res.data[0].signPoint
				})
			},
			submitPointsSetting(pointsSettingForm) {
				this.$refs[pointsSettingForm].validate((valid) => {
					if(valid) {
						let para = {
							register: this.pointsSettingForm.register,
							signPoint: this.pointsSettingForm.signIn,
						}
						getIntegralhandle(para).then(res => {
							this.dialogPointsSetting = false
						})
					}
				})
			},
			systemGive() {
				// 点击系统赠送
				this.dialogSystemGive = true
			},
			//系统赠送积分
			submitSystemGive(systemGiveForm) {
				this.$refs[systemGiveForm].validate((valid) => {
					if(valid) {
						let para = {
							userIdOrPhone: this.systemGiveForm.ID,
							amount: this.systemGiveForm.money,
						};
						givePoints(para).then((res) => {
							this.dialogSystemGive = false
							this.getPointsList()
						})
					}
				})
			},
			systemBuckle() {
				// 点击系统代扣
				this.dialogystemBuckle = true
			},
			//系统扣除积分
			submitSystemBuckle(systemBuckleForm) {
				this.$refs[systemBuckleForm].validate((valid) => {
					if(valid) {
						let para = {
							userIdOrPhone: this.systemBuckleForm.ID,
							amount: this.systemBuckleForm.money,
						};
						console.log(para);
						reducePoints(para).then((res) => {
							this.dialogystemBuckle = false
							this.getPointsList()
						})
					}
				})
			},
			// 分页详情
			handleSizeChange(val) {
				this.size = val;
				this.getPointsList();
			},
			handleCurrentChange(val) {
				this.currentPage = val;
				this.getPointsList();
			}
		},
		mounted() {
			this.getPointsList();
		}
	}

</script>

<style scoped>

</style>
